<!-- 项目列表 -->
<template>
	<view>
		<!-- 搜索 -->
		<search id="search" :fixed="true" v-model="searchVal" color='#999' :searchVal="searchVal" :backgroundColor="themeBgColor"
		 :border="false" @search='search' @clear='clear'>
			<view class="filter uni-flex uni-flex-center" @tap="filter">
				<text class="font26" :style="{'color':themeBgColor}">筛选</text>
				<uni-icons :color="themeBgColor" class="icon-arrow" type="shaixuan" size="22" />
			</view>
		</search>
		<!-- 列表 -->
		<mescroll-uni :down="downOption" @emptyclick="downCallback" @down="downCallback" :up="upOption" @up="upCallback"
		 :fixed="false">
			<view class="project-list">
				<view v-for="(item, index) in cardList" :key="index" class="card-item uni-flex uni-flex-space-between uni-flex-center">
					<view class="card-item-cont">
						<view class="title font26">{{item.title}}</view>
						<view class="content uni-flex uni-flex-space-between">
							<view class="price font22">
								费用合计：{{item.price}} 元
							</view>
							<view class="progress font22">
								项目完成进度：{{item.progress}} %
							</view>
						</view>
					</view>
					<uni-icons color="#666" class="icon-arrow" type="gengduo" size="16" />
				</view>
			</view>
		</mescroll-uni>
		<!-- 筛选 -->
		<right-filter ref="child"/>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import rightFilter from '@/pages/project/components/right-filter.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			MescrollUni,
			uniIcons,
			rightFilter
		},
		computed: {
			...mapGetters(['user', 'themeBgColor'])
		},
		data() {
			return {
				searchVal: '', // 搜索框值
				mescroll: null,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了'
				},
				// 列表数据
				cardList: [{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '2300',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华',
						'price': '23',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '23',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '2300',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华',
						'price': '23',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '23',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '2300',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华',
						'price': '23',
						'progress': '34%'
					},
					{
						'title': '碧桂园一期工程世纪华茂一期工程A座世纪华茂一期工程A座',
						'price': '23',
						'progress': '34%'
					}
				]
			}
		},
		methods: {
			// 搜索
			search() {
				console.log('search')
				// this.$refs.projectListRef.queryByName(this.searchVal)
			},
			// 清空搜索
			clear() {
				this.searchVal = ''
				this.search()
			},
			// 筛选点击
			filter() {
				this.$refs.child.filterHandleOpen()
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				console.log(this.user)
				if (!this.user) {
					mescroll.endErr()
					return
				}
				// todo: api请求分页查询项目待办
				this.$minApi.listAuditProject().then(res => { 
					if (res.ok()) {
						this.cardList = res.data
						// 成功隐藏下拉加载状态
						//  后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(this.cardList.length, this.cardList.length)
						this.$nextTick(() => {
							mescroll.endSuccess(this.cardList.length)
						})
					}
				})
			},
			async queryByName(name) {
				uni.showLoading({
					title: '正在查询数据...'
				})
				const res = await this.$minApi.listAuditProject()
				if (res.ok()) {
					this.cardList = res.data
				}
				uni.hideLoading()
			},
			updateQuery() {
				this.queryByName()
			},
			// 跳转项目详情
			clickCard(item) {
				uni.navigateTo({
					url: '/pages/project/project-detail?data=' + JSON.stringify(item)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mescroll-totop {
		opacity: 1 !important;
	}

	.filter {
		width: 25%;
		// padding-right:10rpx;
	}

	.project-list {
		.card-item {
			background: #fff;
			padding: 20rpx 40rpx;
			margin-bottom: 20rpx;

			.card-item-cont {
				width: 80%;

				.title {
					margin-bottom: 20rpx;
					position: relative;
					padding-left: 20rpx;
					// display: -webkit-box;
					// line-clamp: 2;
					// -webkit-line-clamp: 2;
					// text-overflow: -o-ellipsis-lastline;
					// overflow: hidden;
					// text-overflow: ellipsis;

					&::before {
						content: '';
						display: inline-block;
						position: absolute;
						width: 6rpx;
						height: 30rpx;
						border-radius: 20rpx;
						background-color: $bg-color-blue;
						left: 0;
						top: 10rpx;
					}
				}

				.content {
					padding-left: 20rpx;

					view {
						width: 50%;
					}
				}
			}
		}
	}
</style>
